<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            padding: 15px;
        }

        #app .input-box {
            display: flex;
            align-items: center;
        }

        #app .input-box input {
            box-sizing: border-box;
            width: 80%;
            height: 40px;
            font-size: 16px;
            outline: none;
            padding-left: 10px;
            border-radius: 10px;
            border: 1px solid #ccc;
        }

        #app .input-box .add {
            flex: 1;
            text-align: center;
            font-size: 20px;
            color: rgb(3, 117, 117);
        }

        #app .list .task {
            display: flex;
            justify-content: space-between;
            margin: 20px 0px;
            background-color: red;
            padding: 15px;
            color: white;
            border-radius: 5px;
        }

        #app .list .task.active {
            background-color: aquamarine;
            color: black;
        }

        #app .list .empty {
            text-align: center;
            color: red;
            line-height: 80px;
            font-size: 20px;
        }

        #app .total {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 10px;
            color: white;
        }

        #app .total .all {
            width: 30%;
            height: 30px;
            background-color: rgb(1, 236, 240);
            border-radius: 10px;
            line-height: 30px;
            text-align: center;
        }

        #app .total .finished {
            width: 30%;
            height: 30px;
            background-color: rgb(1, 236, 240);
            border-radius: 10px;
            line-height: 30px;
            text-align: center;
        }

        #app .total .unfinished {
            width: 30%;
            height: 30px;
            background-color: rgb(255, 0, 0);
            border-radius: 10px;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input-box">
            <input type="text" placeholder="请输入任务名称" v-model="inputText">
            <span class="add" @click="add">添加</span>
        </div>
        <div class="total">
            <div class="all">全部任务（ {{totalAll}} ）</div>
            <div class="finished">已完成（ {{totalFinished}} ）</div>
            <div class="unfinished">未完成（ {{totalUnfinished}} ）</div>
        </div>
        <div class="list">
            <!-- :class="{ task:true,active:item.status }" -->
            <div :class=" `task ${item.status == false ? '':'active' } `" v-for="(item,index) in tasklist" :key="index">
                <input type="checkbox" @click="changeStatus(item)">
                <div class="name">{{item.name}}</div>
                <div class="delete" @click="deleteTask">删除</div>
            </div>
            <div class="empty" v-show="tasklist.length == 0">任务列表空空如也！</div>
        </div>
    </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#app',
        data: {
            inputText: '',       //双向绑定，保存输入框中的值
            //保存用户添加的数据
            tasklist: [
                //{ id:1,name:'任务名称'，status:false }
            ]
        },
        methods: {
            add() {
                if (this.inputText) {
                    //构造一个任务对象
                    var obj = { id: this.tasklist.length + 1, name: this.inputText, status: false, count: 1 }
                    //将任务对象添加到任务列表中
                    this.tasklist.push(obj)
                    //清空输入框
                    this.inputText = ''
                }
            },
            changeStatus(item) {           //更改任务状态
                item.status = !item.status
            },
            deleteTask(id) {           //删除不需要的任务对象
                var index = null
                var index = this.tasklist.findIndex((item)=>{
                    if(item.id == id) return true
                })
                this.tasklist.splice(index,1)
            }
        },
        computed: {
            totalAll() {
                var sum = 0
                this.tasklist.forEach((item) => {
                    sum += item.count
                })
                return sum
            },
            totalFinished() {
                var arr = this.tasklist.filter((item) => {
                    return item.status == true
                })
                return arr.length
            },
            totalUnfinished() {
                var arr = this.tasklist.filter((item) => {
                    return item.status == false
                })
                return arr.length
            }
        }
    })
</script>